export const componentMap = {
  // 基础输入框
  input: {
    component: 'el-input',
    props: {
      size: 'small',
      placeholder: '请输入内容',
      clearable: true,
      showWordLimit: false
    }
  },
  textarea: {
    component: 'el-input',
    props: {
      size: 'small',
      placeholder: '请输入内容',
      clearable: true,
      showWordLimit: false,
      type: 'textarea'
    }
  },

  // 密码输入框
  password: {
    component: 'el-input',
    props: {
      type: 'password',
      placeholder: '请输入密码',
      size: 'small',
      showPassword: true,
      clearable: true
    }
  },

  // 数字输入框
  'input-number': {
    component: 'el-input-number',
    props: {
      min: 0,
      max: 100000,
      precision: 0,
      size: 'small'
    }
  },

  // 多选框组
  'checkbox-group': {
    component: 'el-checkbox-group',
    children: options => options?.map(opt => ({
      component: 'el-checkbox',
      props: {
        label: opt.value,
        border: true,
        size: 'small',
        ...opt.props
      },
      content: opt.label
    })) || []
  },

  // 单选框组
  'radio-group': {
    component: 'el-radio-group',
    props: {}, // 保留空对象用于后续合并
    children: options => options?.map((opt, i) => ({
      component: 'el-radio',
      props: {
        label: opt.value,
        size: 'small',
        ...opt.props
      },
      content: opt.label
    })) || []
  },

  // 日期选择器
  date: {
    component: 'el-date-picker',
    props: {
      type: 'date',
      placeholder: '选择日期',
      valueFormat: 'yyyy-MM-dd',
      format: 'yyyy-MM-dd',
      size: 'small'
    }
  },

  // 日期时间选择器
  datetime: {
    component: 'el-date-picker',
    props: {
      type: 'datetime',
      placeholder: '选择日期时间',
      valueFormat: 'yyyy-MM-dd HH:mm:ss',
      size: 'small'
    }
  },

  // 日期范围选择
  daterange: {
    component: 'el-date-picker',
    props: {
      type: 'daterange',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'yyyy-MM-dd',
      rangeSeparator: '至',
      size: 'small'
    }
  },

  // 时间选择器
  time: {
    component: 'el-time-picker',
    props: {
      placeholder: '选择时间',
      valueFormat: 'HH:mm:ss',
      size: 'small'
    }
  },

  // 滑块
  slider: {
    component: 'el-slider',
    props: {
      min: 0,
      max: 100,
      showInput: true,
      showStops: true,
      size: 'small'
    }
  },

  // 评分
  rate: {
    component: 'el-rate',
    props: {
      allowHalf: true,
      showText: true,
      texts: ['极差', '失望', '一般', '满意', '惊喜'],
      size: 'small'
    }
  },

  // 颜色选择器
  color: {
    component: 'el-color-picker',
    props: {
      showAlpha: true,
      predefine: [
        '#ff4500', '#ff8c00', '#ffd700',
        '#90ee90', '#00ced1', '#1e90ff',
        '#c71585', 'rgba(255, 69, 0, 0.68)'
      ],
      size: 'small'
    }
  },

  // 开关
  switch: {
    component: 'el-switch',
    props: {
      activeValue: 1,
      inactiveValue: 0,
      // activeText: '开启',
      // inactiveText: '关闭',
      size: 'small'
    }
  },
  // 下拉选择器
  select: {
    component: 'el-select',
    props: {
      placeholder: '请选择',
      filterable: true,
      clearable: true,
      size: 'small',
      popperAppendToBody: false // 解决下拉面板遮挡问题
    },
    children: options => {
      if (!options) {
        console.error('Select 组件缺少 options 参数')
        return []
      }
      return options.map(opt => ({
        component: 'el-option',
        props: {
          label: opt.label,
          value: opt.value,
          ...opt.props
        },
        content: opt.label
      }))
    }
  },
  // 级联选择
  cascader: {
    component: 'el-cascader',
    props: {
      size: 'small',
      placeholder: '请选择分类',
      props: { // 级联选择器数据配置
        checkStrictly: true,
        label: 'label',
        value: 'value',
        children: 'children'
      }
    }
  },

  // 树形选择
  tree: {
    component: 'el-tree',
    props: {
      nodeKey: 'id',
      showCheckbox: true,
      defaultExpandAll: true
    }
  },

  // 动态加载组件
  map: {
    component: () => import('./MapPicker.vue'),
    props: {
      apiKey: 'YOUR_MAP_KEY'
    }
  },
  // 富文本编辑器（需要自定义组件）
  // wangEditor: {
  //   component: () => import('@/components/DynamicTableForm/Form/wangEditor'),
  //   props: {
  //     height: '500px',
  //     uploadPath: '/api/upload-image'
  //   }
  // },
    // 富文本编辑器（需要自定义组件）
    // editor: {
    //   component: () => import('@/components/DynamicTableForm/Form/Editor'),
    //   props: {
    //     height: 200,
    //   }
    // },

  // 自定义组件
  uploadImage: {
    component: () => import("@/components/DynamicTableForm/Form/uploadImage/index.vue"),
    props: {
      value: ''
    }
  },
  // 自定义组件
  uploadFile: {
    component: () => import('@/components/DynamicTableForm/Form/uploadFile/index.vue'),
    props: {
      value: ''
    }
  },
  // 自定义组件
  uploadVideoOrImage: {
    component: () => import('@/components/DynamicTableForm/Form/uploadVideoOrImage/index.vue'),
    props: {
      value: ''
    }
  },
  // 自定义组件
  // treeselect: {
  //   component: () => import('@riophae/vue-treeselect'),
  //   props: {
  //     value: ''
  //   }
  // }
}
